<template>
  <div class="nav-menu" :style="{width: isCollapse ? '60px' : '210px'}">
    <div class="logo">
      <el-icon @click="handleCollapseClick"><operation /></el-icon>
    </div>
    <el-menu
      active-text-color="#0a60bd"
      background-color="#001529"
      class="el-menu-vertical-demo"
      :default-active="defaultValue"
      text-color="#b7bdc3"
      :collapse="isCollapse"
      :collapse-transition="false"
    >
      <template v-for="item in menus" :key="item.id">
        <template v-if="item.type === 1">
          <el-sub-menu :index="item.id + ''">
            <template #title>
              <el-icon>
                <component :is="'apple'"></component>
              </el-icon>
              <span>{{item.name}}</span>
            </template>
            <template v-if="item.children">
              <template v-for="child in item.children" :key="child.key + ''">
                <el-menu-item @click="handleMenuItemClick(child)" :index="child.id + ''">
                  <el-icon>
                    <component :is="'bowl'"></component>
                  </el-icon>
                  <span>{{child.name}}</span>
                </el-menu-item>
              </template>
            </template>
          </el-sub-menu>
        </template>
      </template>
    </el-menu>
  </div>
</template>

<script lang='ts'>
import { defineComponent, computed, ref } from "vue";
import { useRouter, useRoute } from 'vue-router'
import { useStore } from "@/store"

import { pathMapToMenus } from '@/utils/mapRoutes'
export default defineComponent({
  emits: ['foldChange'],
  setup(_, { emit }) {
    const store = useStore()

    const menus = computed(() => store.state.login.roleMenus)
    console.log('menus', menus.value)

    // 页面刷新时的url路径
    const route = useRoute()
    const currentPath = route.path

    // 将对象的id绑定到default-active
    const currentMenu = pathMapToMenus(menus.value, currentPath)
    const defaultValue = ref(currentMenu.id + '')

    const isCollapse = ref(false)

    const router = useRouter()

    const handleCollapseClick = () => {
      isCollapse.value = !isCollapse.value
      emit('foldChange', isCollapse.value)
    }

    const handleMenuItemClick = (item: any) => {
      router.push({
        path: item.url ?? '/notfound'
      })
    }

    return {
      menus,
      isCollapse,
      defaultValue,
      handleCollapseClick,
      handleMenuItemClick
    }
  }
});
</script>

<style scoped lang='less'>
.nav-menu {
  height: 100%;
  background-color: #001529;

  .logo {
    text-align: right;
    align-items: center;
    color: #ccc;
    box-sizing: border-box;
    padding: 20px 20px 0;
    font-size: 18px;

    .el-icon {
      cursor: pointer;
    }
  }

  .el-menu {
    border-right: none;

    &.el-menu--collapse {
      width: 100%;
    }
    
    .el-sub-menu {
      width: 100%;
      text-align: left;

      ::v-deep .el-sub-menu__title {
        background-color: #001529 !important;
      }

      .el-menu-item {
        padding-left: 50px!important;
        text-align: left;
      }
    }

    .el-menu-item:hover {
      color: #fff;
    }

    .el-menu-item.is-active {
      color: #fff !important;
      background-color: #0a60bd !important;
    }
  }
}
</style>